<template>
  <el-drawer
    v-model="drawer"
    title="个人资料"
    direction="rtl"
    :before-close="handleClose"
  >
    <div @click="tiaozhuan('个人信息')" class="point">
      <el-icon><Orange /></el-icon>
      个人信息
    </div>
    <div @click="tiaozhuan('修改密码')" class="point">
      <el-icon><IceCreamRound /></el-icon>
      修改密码
    </div>
    <div @click="tuichu" class="point">
      <el-icon><Watermelon /></el-icon>
      退出登录
    </div>
    <div></div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

//全局状态管理
const store = useStore();

//路由跳转
const router = useRouter();

const drawer = ref(false);
const direction = ref("rtl");
const radio1 = ref("Option 1");

watch(
  () => store.state.drawer,
  (navl) => {
    drawer.value = navl;
  }
);

//取消时弹出的消息提示框
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确定要退出吗？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      store.commit("CHANGE_DRAWER", false);
    })
    .catch(() => {
      // catch error
    });
};

const tuichu = () => {
  ElMessageBox.confirm("你确定要退出登录吗?", "退出提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      localStorage.removeItem("token");
      ElMessage({
        type: "success",
        message: "退出成功",
      });
      router.go(0);
    })
    .catch(() => {
      ElMessage({
        type: "error",
        message: "退出失败",
      });
    });
};

const tiaozhuan = (res:any) => {
  switch (res) {
    case "个人信息":
      router.push("/myhome/idetail");
      break;
    case "修改密码":
      router.push("/myhome/revamp");
      break;
  }
  store.commit("CHANGE_DRAWER", false);
};
</script>

<style lang="scss" >
.common-layout {
  .el-aside {
    background-color: #545c64;
  }
  .el-header {
    background-color: #f4f4f5;
  }
  .el-main {
    background-color: gainsboro;
  }
}
// 高度100%
.el-aside,
.el-container,
.common-layout,
#app,
body,
html {
  height: 100%;
}
.el-menu {
  overflow: hidden;
}
</style>